<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-bind:属性名='值'  v-bind简写成: -->
        <img v-bind:src="img" alt="" width="400px">
        <!-- v-bind简写成: -->
        <img :src="img" alt="" width="400px">

        <!-- 所有的属性都是通过 v-bind绑定的 -->
        <a :href="website.href">
            <img :src="website.logo" alt="" class="logo" width="300px">
            {{website.title}}
        </a>

        <!-- v-bind还可以绑定自定义属性 -->
        <div :aa="website.name">自定义属性</div>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                img:"https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/baike/pic/item/0823dd54564e9258153b60b79182d158ccbf4e58.jpg",
                website:{
                    title:"百度",
                    logo:"https://img1.baidu.com/it/u=2468736622,4183936653&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=888",
                    href:"http://www.baidu.com",
                    name:"web0221"
                }
            },
            methods:{}
        })
    </script>
</body>
</html>
